<template>
  <ContentWrap title="流程事件列表">
    <div class="app-container">
      <Search
        ref="search"
        :schema="schema"
        :model="queryParam"
        :is-col="false"
        layout="inline"
        :showSearch="true"
        button-position="left"
        :search-loading="loading"
        :reset-loading="loading"
        @search="search"
        @reset="search"
      >
        <template #opts>
          <BaseButton type="success" @click="add()">新增事件</BaseButton>
        </template>
      </Search>
    </div>
    <Table :data="flowEvents" :columns="columns" row-key="Id" :pagination="paging" @change="load">
      <template #createTime="e">
        {{ $formatTime(e.row.CreateTime, 'yyyy-MM-dd HH:mm') }}
      </template>
      <template #interType="e">
        {{ FlowInterType[e.row.InterType].text }}
      </template>
      <template #useRange="e">
        {{ getTextName(e.row.UseRange, useRange) }}
      </template>
      <template #status="e">
        <el-switch
          v-model="e.row.Status"
          :inactive-text="e.row.Status == 0 ? FlowInterStatus[0].text : FlowInterStatus[2].text"
          active-text="启用"
          :active-value="1"
          inactive-value="2"
          @change="(val) => setStatus(e.row, val)"
        />
      </template>
      <template #action="e">
        <BaseButton :icon="viewIcon" size="small" type="primary" circle @click="show(e.row)" />
        <BaseButton
          v-if="e.row.Status !== 1"
          :icon="editIcon"
          size="small"
          type="primary"
          circle
          @click="edit(e.row)"
        />
        <BaseButton
          v-if="e.row.Status === 0"
          :icon="dropIcon"
          size="small"
          type="danger"
          circle
          @click="deleteFlow(e.row)"
        />
      </template>
    </Table>
    <flowInterEdit :id="id" v-model:visible="visible" @close="closeEdit" />
    <flowInterView :id="id" v-model:visible="viewVisible" />
  </ContentWrap>
</template>

<script>
import { EnumDic, FlowInterType, FlowInterStatus } from '@/flow/config/flowConfig'
import * as interApi from '@/flow/api/flowInter'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useIcon } from '@/hooks/web/useIcon'
import flowInterEdit from './components/flowInterEdit.vue'
import flowInterView from './components/flowInterView.vue'
export default {
  components: {
    Table,
    Search,
    flowInterEdit,
    flowInterView
  },
  data() {
    return {
      EnumDic,
      FlowInterType,
      FlowInterStatus,
      flowEvents: [],
      id: null,
      loading: false,
      schema: [
        {
          field: 'QueryKey',
          label: '事件名',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '事件名'
          }
        },
        {
          field: 'UseRange',
          label: '使用范围',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowUseRange,
            multiple: true,
            sysHead: 'flow',
            placeholder: '审批结果',
            on: {
              load: (val) => {
                this.useRange = val
              }
            }
          }
        },
        {
          field: 'Status',
          label: '接口状态',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowInterStatus,
            sysHead: 'flow',
            multiple: true,
            placeholder: '接口状态'
          }
        }
      ],
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      viewIcon: useIcon({ icon: 'ep:view' }),
      visible: false,
      viewVisible: false,
      useRange: [],
      queryParam: {
        Status: [],
        QueryKey: null,
        InterType: null,
        UseRange: null
      },
      columns: [
        {
          field: 'InterName',
          label: '事件名',
          align: 'left',
          minWidth: 250
        },
        {
          sortby: 'InterType',
          field: 'InterType',
          label: '通信类型',
          align: 'center',
          width: 150,
          slotName: 'interType',
          sortable: 'custom'
        },
        {
          sortby: 'UseRange',
          field: 'UseRange',
          label: '事件类型',
          align: 'center',
          width: 150,
          slotName: 'useRange',
          sortable: 'custom'
        },
        {
          sortby: 'Status',
          field: 'Status',
          label: '状态',
          align: 'center',
          width: 150,
          slotName: 'status',
          sortable: 'custom'
        },
        {
          field: 'CreateTime',
          label: '创建时间',
          align: 'center',
          slotName: 'createTime',
          sortable: 'custom',
          width: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      }
    }
  },
  computed: {},
  mounted() {
    this.reset()
  },
  methods: {
    getTextName(val, list) {
      const item = list.find((a) => a.Value === val)
      if (item) {
        return item.Text
      }
      return null
    },
    closeEdit(isRefresh) {
      if (isRefresh) {
        this.load()
      }
    },
    add() {
      this.id = null
      this.visible = true
    },
    edit(row) {
      this.id = row.Id
      this.visible = true
    },
    show(row) {
      this.id = row.Id
      this.viewVisible = true
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.queryParam.UseRange = null
      this.queryParam.InterType = null
      this.$refs.search.setValues(this.queryParam)
      this.load()
    },
    search(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.Status = data.Status
      this.queryParam.UseRange = data.UseRange
      this.queryParam.InterType = data.InterType
      this.load()
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await interApi.Query(this.queryParam, curPaging)
      if (res.List) {
        this.flowEvents = res.List
      } else {
        this.flowEvents = []
      }
      this.paging.total = res.Count
    },
    async setStatus(row, value) {
      if (value == 1) {
        await interApi.Enable(row.Id)
      } else {
        await interApi.Disable(row.Id)
      }
      row.Status = value
    },
    deleteFlow(row) {
      const title = '确认删除事件:' + row.InterName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await interApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.reset()
    }
  }
}
</script>
<style scoped>
.rowSpan {
  display: inline-block;
  width: 100%;
}
</style>
